<template>
    <!-- <Tools></Tools> -->
    <div class="container">
        <Dnd class="left-box" ref="dndRef"></Dnd>
        <div class="right-box">
            <Graph ref="graphRef" :graphId="graphId"></Graph>
            <NodeDesc ref="nodeDescRef" class="node-desc"></NodeDesc>
            <div :id="graphId+'map'" class="mini-map"></div>
        </div>
    </div>
</template>
<script>
import { inject, onMounted, provide, reactive, ref } from '@vue/runtime-core'
import Dnd from './components/dnd'
import Graph from './components/graph'
import NodeDesc from './components/nodeDesc'

export default {
    components: {
        Graph,
        NodeDesc,
        Dnd
    },
    props: {
        graphId: {
            default: 'main',
            type: [String, Number]
        }
    },
    setup () {
        // 定义ref
        const dndRef = ref(null)
        const graphRef = ref(null)
        const nodeDescRef = ref(null)

        // 定义总对象
        const editor = reactive({
            graph: null,
            dnd: null
        })

        const cmptCellInfoFromOutside = inject('cmptCellInfo', null)
        const cmptCellInfo = reactive({
            data: { name: '' }
        })
        provide('editor', editor)
        if (!cmptCellInfoFromOutside) {
            provide('cmptCellInfo', cmptCellInfo)
        }

        onMounted(() => {
            graphRef.value.init()
            dndRef.value.init()
        })

        const addTabs = inject('addTabs', () => {})
        // cell点击回调
        const cellClickCallback = (data) => {
            if (data.component === 'cmptProcessNode') {
                addTabs(data)
            }
        }
        provide('cellClickCallback', cellClickCallback)

        return {
            dndRef,
            graphRef,
            nodeDescRef
        }
    }
}
</script>
<style lang="less" scoped>
.left-box{
    width: 200px;
    height: 100%;
    position: relative;
    display: inline-block;
}
.right-box{
    width: ~"calc( 100% - 200px )";
    min-height: 600px;
    height: 100%;
    position: sticky;
    top: 0;
    float: right;
    display: flex;
    .node-desc{
        width: 200px;
    }
}
.container {
    // border: 1px solid #dfe3e8;
}
.mini-map{
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 9;
    background: white;
    border: 1px solid gray;
}
</style>
